<template>
    <div class="pay">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        付款详情
      </div>
      <div class="content">
        <div class="price-wrapper">
          <div class="line-block-item">支付金额<span style="color:#F7C20F">￥{{originalAmount}}</span></div>
          <div class="line-block-item">原始价格￥{{originalAmount-discountAmount}}</div>
        </div>
        <div class="pay-items-wrapper">
          <div class="item" :class="{bank:item.payWay===3,weichat:item.payWay===2,card:item.payWay===4}" @click="isChecked=item.payWay" v-for="item in payWayList">
            <div class="left">{{item.payWayTitle}}</div>
            <div class="right">
              <div class="radio " :class="{isChecked:isChecked===item.payWay}">
                <span class="icon"></span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <form id="pay_form" v-show="false"
                action="https://gateway.95516.com/gateway/api/frontTransReq.do"
                method="post">
          <input type="text"  v-for="(item , key) in _uniPay" :name="key" :value="item">

            <!--<input type="hidden" name="signature" id="signature" value="" />-->
          </form>
        </div>
        <div class="btn-wrapper">
          <button class="btn" @click="_preOrder">立即支付</button>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage";
    export default {
        name: "pay",
        components:{
          'back':back
        },
        data(){
          return{
            isChecked:2,
            payWayList:[],
            originalAmount:0,
            discountAmount:0,
            uniPay:{
              version:'5.1.0',
              encoding:'utf-8',
              txnType:'01',
              txnSubType:'01',
              bizType:'000201',
              frontUrl:'http//:www.baidu.com',
              backUrl:'http//:www.baidu.com',
              signMethod:'01',
              accessType:'0',
              channelType:'08',
              currencyCode:'156',
              merId:'102330178320021',
              signature:'UfR4EHEma3rnwsQPIQOsdzEiVgEyT/tEza6vXiy1AjnlSS5C2qVVeV1TWClTXVA6OPh5Y9E7OyOwQYbWeuK+a4hCreY/R7oESNiF9gZs7KCphGp54daKOjRV1zNRcL2pDT2YhleBGQPgH/dwdhrOuprrFtvJBhi0TbRxFX2LSBU=',
              orderId:'',
              accNo:'01',
              txnTime:'',
              certId:'124876885185794726986301355951670452718',
              txnAmt:'',
              payTimeout:60*15*1000
            }
          }
        },
        methods:{
          _preOrder(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:'/api/member/payOrder',
                data:{
                  // seatCouponList:getStorage('seatCouponList'),
                  lockSeatFlowId:getStorage('chooseSeatInfo').lockSeatFlowId,
                  payWay:this.isChecked,
                  openId:'oHawNwkojxZInuGh03eXsr1LenNE'
                  // labelActId:''
                }
              }
            ).then((res)=>{
              if(res.data.status===global.ERR_OK){
                if(res.data.code===0){
                    let data = res.data.data
                    let payWay = data.payWay
                    if(payWay===2){
                      this._payForWechat(data.platformPayData)
                    }
                    if(payWay===3){
                      this.uniPay.orderId = data.orderId
                      this.uniPay.txnAmt = data.realPayAmount
                      this.uniPay.txnTime = (new Date()).valueOf()
                      console.log((new Date()).valueOf())
                      setTimeout(()=>{
                        // document.all.pay_form.submit();
                      },3000)

                      console.dir(this.uniPay)
                    }
                }else {
                  // Toast(res.data.errorMsg)
                }
              }else {
                // Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          },
          _preBuy(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo')?getStorage('userInfo').JSESSIONID:''
                },
                url:'/api/member/preBuy',
                data:{
                  // seatCouponList:getStorage('seatCouponList'),
                  lockSeatFlowId:getStorage('chooseSeatInfo').lockSeatFlowId,
                  // labelActId:''
                }
              }
            ).then((res)=>{
              if(res.data.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  this.payWayList = data.payWayList
                  this.discountAmount = data.discountAmount
                  this.originalAmount = data.originalAmount

                }else {
                  // Toast(res.data.errorMsg)
                }
              }else {
                // Toast('服务器错误，错误代码:'+res.data.status)
              }
            }).catch((res)=>{
            })
          },
          _payForUni(){
            alert()

          },
          _payForWechat(d){
            let data = JSON.parse(d)
            let appId = data.appid
            let timestamp = data.timestamp
            let nonceStr = data.noncestr
            let signature = data.sign
            let prepayid = data.prepayid
            let partnerid = data.partnerid
            let pkg = data.package
            console.log(data)
            this.$wechat.config({
              debug: true,
              appId: appId, // 必填，公众号的唯一标识
              timestamp:timestamp, // 必填，生成签名的时间戳
              nonceStr: nonceStr, // 必填，生成签名的随机串
              signature: signature,// 必填，签名
              jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
            })
            // window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId
            // return
            this.$wechat.chooseWXPay({
              timestamp:timestamp,
              nonceStr:nonceStr,
              package:pkg,
              signType:'MD5',
              signature: signature,
              paySign:prepayid,
              success:((res)=>{
                console.log(res)
              }),
              cancel:((res)=>{
                console.log('error')
              })
            })
          }
        },
        mounted() {
          this._preBuy()
          // console.log(getStorage('chooseSeatInfo'))
          // console.log(this.$wechat)
        },
        computed:{
          _uniPay(){
            return this.uniPay
          }
        }
    }
</script>

<style scoped lang="stylus">
  .pay
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      position relative
      height calc(100% - 42px)
      overflow hidden
      .price-wrapper
        color #8B929E
        font-size 12px
        padding-top 22px
        .line-block-item
          line-height 22px

      .pay-items-wrapper
        margin-top 14px
        .item
          display flex
          background #222426
          height 56px
          margin-bottom 10px
          .left,.right
            flex 1
            height 100%
          .left
            padding-left 50px
            font-size 16px
            line-height 56px
            text-align left
            color #ffffff
          .right
            position relative
            .radio
              position absolute
              right 10px
              top 18px
              height 16px
              width 16px
              border-radius 10px
              border 2px solid #616161
              overflow hidden
              transition all .5s
              background #222426
              .icon
                display inline-block
                height 100%
                width 100%
                background url("icon_checked.svg")no-repeat center/12px 12px
                opacity 0
                transition opacity .5s
              &.isChecked
                background #F7C20F
                border 2px solid #F7C20F
                transition all .5s
                .icon
                  opacity 1
                  transition opacity .5s
          &.bank
            .left
              background url("icon_pay_bank@2x.png")no-repeat 10px center/30px 30px
          &.weichat
            .left
              background url("icon_pay_weichat@2x.png")no-repeat 10px center/30px 30px
          &.card
            .left
              background url("icon_pay_card@2x.png")no-repeat 10px center/30px 30px

      .btn-wrapper
        position absolute
        bottom 0
        height 41px
        width 100%
        .btn
          height 100%
          width 100%
          background none
          outline none
          border none
          background #F7C20F
          color #161719
          font-size 16px
</style>
